<template>
  <div>
    <!-- 标题 -->
    <div class="titleArea">
      <div class="titleArea-label"></div>
      <div class="titleArea-content">通用模态框配置</div>
    </div>
    <!-- 步骤条 -->
    <a-steps class="stepsArea" :current="current" @change="stepChange">
      <a-step title="配置树节点" description="选择申请表与企业表关联，进行字段配置" />
      <a-step title="配置从表" description="选择主体字段与中文名称" />
      <a-step title="配置关系" description="选择主体字段与中文名称" />
    </a-steps>
    <!-- 内容 -->
    <div class="contentArea">
      <div v-show="current == 0">
        <RelationTable ref="RelationNode" :configItemList="nodeItemList" />
      </div>
      <div v-show="current == 1">
        <!-- <a-row :gutter="16" style="margin-bottom: 15px">
          <a-col :span="3"> 主表的关联字段： </a-col>
          <a-col :span="8">
            <SearchField ref="SearchFieldRef" @f_setField="s_setField" :value="subtableRel" />
          </a-col>
        </a-row> -->

        <RelationTable ref="RelationTable" :configItemList="tableItemList" />
      </div>
      <div v-if="current == 2">
        <DragTree ref="DragTreeRef" :treeList="this.nodeItemList.concat(this.tableItemList)" />
      </div>
    </div>

    <!-- json组件 -->
    <ShowJson ref="showJsonRef" />

    <!-- 按钮 -->
    <div class="btnBox">
      <a-button :style="{ marginRight: '8px' }" icon="rollback"> 返回 </a-button>
      <a-popconfirm class="plusBox" title="确定重置吗？" ok-text="是" cancel-text="否" @confirm="reset()">
        <a-button :style="{ marginRight: '8px' }" icon="rollback"> 重置 </a-button>
      </a-popconfirm>
      <a-button v-if="current != 2" @click="configSave()" type="primary" :style="{ marginRight: '8px' }" icon="save">
        保存
      </a-button>
      <a-button v-else @click="complete()" type="primary" :style="{ marginRight: '8px' }" icon="save"> 完成 </a-button>
      <a-button @click="showJson()" type="primary" :style="{ marginRight: '8px' }" icon="save"> json </a-button>
    </div>
  </div>
</template>
<script>
import { analysisData, analysisTable } from '@/utils/component/parseData.js'
export default {
  data() {
    return {
      f_configKey: undefined, // 当前配置key
      nodeItemList: [
        { title: '生产场地', key: 'SITE', isConfigurItem: false, sign: 4, subtable: false },
        { title: '厂区', key: 'FAC', isConfigurItem: false, sign: 1, subtable: false },
        { title: '检验室', key: 'LAB', isConfigurItem: false, sign: 2, subtable: false },
        { title: '车间', key: 'PLANT', isConfigurItem: false, sign: 3, subtable: false },
        { title: '功能间', key: 'PLANTFUNC', isConfigurItem: false, sign: 5, subtable: false },
      ], // 树节点配置项
      tableItemList: [
        { title: '仓储[从表]', key: 'STORE', isConfigurItem: false, subtable: true },
        { title: '检验仪器[从表]', key: 'LABAPP', isConfigurItem: false, subtable: true },
        { title: '生产设备[从表]', key: 'PLANTEQU', isConfigurItem: false, subtable: true },
      ], // 子表格配置项
      factoryConfig: this.$store.state.com_config.analysisObj.factoryConfig,
      factoryTemp: {
        // 校验不能为空的树节点 节点 / 为空提示 / 子表格是否必填
        check_node: [
          // {
          //   node: '1',
          //   msg: '请添加厂区',
          // },
        ],
        // 生产场地
        site_init: {
          fill_item: [], // 表单填写项
        },
        // 厂区
        fac_init: {
          fill_item: [], // 表单填写项
          rules: {}, // 校验规则
        },
        // 检验室
        lab_init: {
          fill_item: [], // 表单填写项
          rules: {}, // 校验规则
        },
        // 车间
        plant_init: {
          fill_item: [], // 表单填写项
          rules: {}, // 校验规则
        },
        // 功能间
        plantfunc_init: {
          fill_item: [], // 表单填写项
          rules: {}, // 校验规则
        },
        // 仓储表格项
        store_init: {
          columns: [],
          slot_list: [],
        },
        // 车间表格项
        plantequ_init: {
          columns: [],
          slot_list: [],
        },
        // 检验室表格项
        labapp_init: {
          columns: [],
          slot_list: [],
        },
      },
      current: 0,
    }
  },
  created() {
    // 如果从未配置过初始化
    if (JSON.stringify(this.factoryConfig) == '{}') {
      this.dataInit()
    } else {
      // 把配好的置为完成
      this.nodeItemList.concat(this.tableItemList)
      for (let v of this.nodeItemList.concat(this.tableItemList)) {
        if (this.$store.getters.getOriginalObj(v.key) != null) {
          v.isConfigurItem = true
        }
      }
      for (let v of this.tableItemList) {
        if (this.$store.getters.getOriginalObj(v.key) != null) {
          v.isConfigurItem = true
        }
      }
    }
    // this.$store.state.com_config.analysisObj.factoryConfig = {}
    console.log('this.factoryConfig', this.$store.state.com_config.analysisObj.factoryConfig)
  },
  methods: {
    // 最后一步完成
    complete() {
      let g_check = this.$refs.DragTreeRef.f_getTreeList()
      console.log('构建树配置', g_check)
      if (g_check?.status) {
        // 构建树配置
        this.$message.success('保存成功')
      }
    },
    // 拖动树节点过滤
    treeConcat() {
      return this.nodeItemList.concat(this.tableItemList)
    },
    // 重置配置项
    reset() {
      let key = null
      let cleanItem = {}
      let nodeKey = null
      if (this.current == 0) {
        key = this.$refs.RelationNode.f_reset()
        nodeKey = key.toLowerCase() + '_init'
        cleanItem.fill_item = []
        cleanItem.rules = {}
        // 置为未配置
        for (let v of this.nodeItemList) {
          if (v.key == key) {
            v.isConfigurItem = false
            break
          }
        }
      } else if (this.current == 1) {
        key = this.$refs.RelationTable.f_reset()
        nodeKey = key.toLowerCase() + '_init'
        cleanItem.columns = []
        cleanItem.slot_list = []
        // 置为未配置
        for (let v of this.tableItemList) {
          if (v.key == key) {
            v.isConfigurItem = false
            break
          }
        }
      }
      // 清空Vuex数据
      this.factoryConfig[nodeKey] = cleanItem
      this.$store.commit('setAnalysisFacItemObj', [nodeKey, cleanItem])
      this.$store.commit('setOriginalObj', [key, null])
      console.log('重置', this.$store.state.com_config)
    },
    // 显示json弹框
    showJson() {
      this.$refs.showJsonRef.init(this.factoryConfig)
    },
    // 数据初始化
    dataInit() {
      for (let key in this.factoryTemp) {
        this.factoryConfig[key] = this.factoryTemp[key]
      }
    },
    // columns 根据之前的长度动态逻辑配置子表格宽
    // 获取组装子组件所有配置
    configSave() {
      let g_check = null
      if (this.current == 0) {
        g_check = this.$refs.RelationNode.f_getConfig()
      } else if (this.current == 1) {
        g_check = this.$refs.RelationTable.f_getConfig()
      }
      // 校验成功
      if (g_check.status) {
        console.log('配置成功', g_check.key, g_check)
        // console.log('Vuex',  this.$store.state.com_config)
        // 2. 按格式组装配置对象
        if (this.current == 0) {
          this.nodeProperties(g_check.key, g_check.value)
        } else {
          this.tableProperties(g_check.key, g_check.value)
        }
        // 先存储vuex里的原始对象
        
        console.log('+-+-9-', g_check.value)
        this.$store.commit('setOriginalObj', [g_check.key, g_check.value])
        this.$message.success('保存成功')
      } else {
        console.warn('通用组件配置失败', g_check)
      }
    },
    // 树节点数据组装
    nodeProperties(key, value) {
      console.log('树节点组装数据', value)
      // 数据解析
      let result = analysisData(value)
      if (result.status) {
        const nodeKey = key.toLowerCase() + '_init'
        let configVlaue = result.value
        configVlaue.sonrelafield = value.sonrelafield
        this.factoryConfig[nodeKey] = configVlaue
        // 存储vuex里的解析对象
        this.$store.commit('setAnalysisFacItemObj', [nodeKey, configVlaue])
      }

      console.log('节点配置对象->', this.factoryConfig)
    },
    // 子表格数据组装
    tableProperties(key, value) {
      console.log('子表格组装数据', value)
      let result = analysisTable(value)
      if (result.status) {
        const nodeKey = key.toLowerCase() + '_init'
        let configVlaue = result
        configVlaue.farelafield = value.farelafield
        this.factoryConfig[nodeKey] = configVlaue
        // 存储vuex里的解析对象
        this.$store.commit('setAnalysisFacItemObj', [nodeKey, configVlaue])
        console.log('表格配置对象->', this.factoryConfig)
      }
    },
    // 步骤条修改
    stepChange(key) {
      this.current = key
    },
  },
  components: {
    RelationTable: () => import('@/views/businessAssembly/public/relationTable.vue'),
    ShowJson: () => import('@/views/businessAssembly/public/spareparts/showJson.vue'),
    DragTree: () => import('@/views/businessAssembly/public/dragTree.vue'),
    SearchField: () => import('@/views/businessAssembly/public/spareparts/searchField'),
  },
}
</script>

<style lang="less" scoped>
</style>
